<template>
  <h3>num: {{ num}}</h3>
  <h3>name:{{obj.name}}</h3>
  <h3>numBoo:{{numBoo}}</h3>
  <button @click="change">change</button>
</template>

<script>
// composition API  组合API
import {ref,reactive,computed,watch} from 'vue'
export default {
  name: 'App',
  setup(){
    let num=ref(0);
    let obj=reactive({
      name:'zhangsan'
    })

    function change(){
      num.value++;
      // obj.value.name='huge';
      obj.name='huge';
      console.log(num,obj);
    }

    let numBoo=computed(()=>{
      return num.value>5;
    })
    let numBoo2=computed(()=>{
      return num.value>10;
    })
   
   return {
      num,
      obj,
      numBoo,
      change
    }
  }
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>
